<template>
    <div class="mains-center">
        <div class="van-nav-bar__content bg" style="background-color: white;">
            <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow"><!----></i><span
                    class="van-nav-bar__text" @click="Loss">返回</span></div>
            <div class="van-nav-bar__title van-ellipsis"></div>
        </div>
        <van-tabs v-model="active" @click="tack">
            <van-tab title="全部"></van-tab>
            <van-tab title="待付款"></van-tab>
            <van-tab title="待发货"></van-tab>
            <van-tab title="待收货"></van-tab>
            <van-tab title="待评价">内容 4</van-tab>
        </van-tabs>
        <div class="nie-center">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div v-for="(item, index) in list" :key="index">
                    <div class="van-cell-group van-hairline--top-bottom van-panel" v-for="(item, add) in list[index]"
                        style="margin-top: 20px;">
                        <div class="van-cell van-panel__header">
                            <div class="van-cell__title"><span>订单编号: {{ item.orderSn }}</span>
                            </div>
                            <div class="van-cell__value van-panel__header-value"><span>{{ item.orderStatusText }}</span>
                            </div>
                        </div>
                        <div v-for="(val, indexs) in item.goodsList">

                            <div class="van-panel__content">
                                <div class="van-card" style="background-color: white;">
                                    <div class="van-card__header"><a class="van-card__thumb">
                                            <div class="van-image" style="width: 100%; height: 100%;"><img :src="val.picUrl"
                                                    class="van-image__img" style="object-fit: cover;"></div>
                                        </a>
                                        <div class="van-card__content">
                                            <div>
                                                <div class="van-card__title van-multi-ellipsis--l2">{{ val.goodsName }}
                                                </div>
                                                <div>
                                                    <div class="desc"><span class="van-tag van-tag--plain van-tag--default"
                                                            style="margin-right: 6px;">
                                                            {{ val.specifications[0] }}
                                                        </span></div>
                                                </div>
                                            </div>
                                            <div class="van-card__bottom">
                                                <div class="van-card__num">x{{ val.number }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="total" style="text-align: right; font-size: 14px;">合计: ¥{{ item.actualPrice }}.00（含运费）
                        </div>

                        <div class="van-panel__footer van-hairline--top" style="text-align: right;">
                            <div class="footer_btn"><!----><!----><!----><!----><button @click="adds(item.id)"
                                    class="van-button van-button--default van-button--small">
                                    <div class="van-button__content"><span class="van-button__text">删除订单</span></div>

                                </button><!---->
                                <button @click="zhifu(item)" v-show="item.handleOption.cancel"
                                    class="van-button van-button--danger van-button--small">
                                    <div data-v-3cbecffc="" class="van-button__content"><span data-v-3cbecffc=""
                                            class="van-button__text">去支付</span></div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>
<script>
import { Tab, Tabs } from 'vant';
import { Dialog } from 'vant';
import { listss, delpost } from "@/api/index"
export default {
    name: 'take',
    data() {
        return {
            active: 0,
            list: [],
            finished: false,
            pages: "",
            loading: false,
        }
    },
    methods: {
        adds(id) {
            Dialog.confirm({
                title: '确认删除吗',
            })
                .then(() => {
                    console.log(id)
                    delpost({ orderId: id }).then((res) => {
                        console.log(res)
                        this.list = []
                        listss({ showType: this.active, page: 1, limit: 10 }).then(res => {
                            console.log(res.data.data.pages)
                            this.pages = res.data.data.pages
                            this.list.push(res.data.data.list)
                        })
                        this.onLoad()
                    })
                })
        },
        zhifu(item) {
            console.log(item.id)
            this.$router.push({
                path: '/orderpay',
                query: {
                    id: item.id
                }
            })
        },
        onLoad() {
            setTimeout(() => {
                console.log(this.pages)
                for (var i = 2; i <= this.pages; i++) {
                    listss({ showType: this.active, page: i, limit: 10 }).then(res => {
                        this.list.push(res.data.data.list)
                    })
                }
                // 加载状态结束
                this.loading = false;
                // 数据全部加载完成
                console.log(this.list)
                // if (this.list.length >= this.pages) {
                    this.finished = true;
                // }
            }, 1000);
        },
        tack() {
            localStorage.setItem("indexid", this.active)
            this.list = []
            console.log(this.active);
            listss({ showType: this.active, page: 1, limit: 10 }).then(res => {
                console.log(res.data.data.pages)
                this.pages = res.data.data.pages
                this.list.push(res.data.data.list)
            })
        },
        Loss() {
            this.$router.go(-1)
        },
    },
    mounted() {
        var abc = localStorage.getItem("indexid")
        console.log(abc)
        this.active = Number(abc)
        console.log(Number(abc))
        // this.active = Number(this.$route.query.id) + 1
        listss({ showType: this.active, page: 1, limit: 10 }).then(res => {
            console.log(res.data.data.list)
            this.list.push(res.data.data.list)
            this.pages = res.data.data.pages

        })
        // this.onLoad()
    },
    components: {

    }
}
</script>
<style lang="scss">
.nie-center {
    height: 86vh;
    // border: 1px solid red;
    overflow-y: auto;
}

.mains-center {
    background-color: #f2f2f2;
    height: 100vh
}
</style>